<template>
  <div class="App">
    <h1>我是App组件</h1>
    <h2>父组件传给子组件的count：{{count}}</h2>
<!--    父组件通过props给子组件传参(传参过程遵从单向数据流)：1.传基本参数，2.传函数 3.传对象时通过v-bind批量传参-->
    <Count :count="count" :changeCount="changeCount" v-bind="news"/>
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  data(){
    return{
      count:1,
      news:{
        name:'kobe',
        age:18
      }
    }
  },
  components: {Count},
  comments:{
    Count
  },
  methods:{
    changeCount(n){
      this.count+=n
    }
  }
}
</script>

<!--scoped表示给当前元素设置作用域，只对当前组件内的元素生效-->
<style scoped>
.App{
  background-color: antiquewhite;
}

/*样式穿透---只在父组件上添加自定义属性，子组件不再添加自定义属性*/
.App >>> .count{
  background-color: aqua;
}
</style>